<template>
  <div class="inject1">
    <h1>这里是最大的组件爷爷组件</h1>
    <h4>资产：{{ money }}</h4>
    <h4>汽车：{{ car }}</h4>
    <button @click="money += 1">资产+1</button>
    <button @click="car.price += 1">汽车价格+1</button>
    <inject2></inject2>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, provide } from "vue";
import inject2 from "./inject2.vue";
// 数据
let money = ref(100);
let car = reactive({
  brand: "奔驰",
  price: 100,
});
// 用于更新money的方法
function updateMoney(value: number) {
  money.value += value;
}
// 提供数据
provide("moneyContext", { money, updateMoney });
provide("car", car);
</script>
<style scoped>
.inject1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>